<template>
   <div>
    ref : {{ Man }}
   </div>
   <div>
    shallowRef : {{ Man2 }}
   </div>
   <hr>
   <button @click="change">修改</button>
   <hr>
   <Computed></Computed>
   <Table></Table>
</template>

<script setup lang='ts'>
import { ref, isRef, shallowRef, triggerRef } from 'vue'
import Computed from './computed.vue'
import Table from './Table.vue'

type M = {
  name: String
}
const Man = ref<M>({name:"xiaoman"})
const Man2 = shallowRef({name:"xiaoman22"})
const Man3 = {name:"xiaoman"}
const change = ()=>{
  Man2.value = {name: "daman22"} // 只到.value这层 
  triggerRef(Man2); // 强行更新shallowRef的视图
  console.log(Man2);
  console.log(isRef(Man2)); // false
  
}
</script>

<style scoped>

</style>